<template>
  <div style="margin-top: 15px; padding: 0 16px">
    <el-tabs type="border-card" style="min-height: 320px; box-shadow: none">
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> 成绩明细</span>
        </template>
		<div class="header">
		  <div class="btns">
		    <el-button type="primary" size="mini" plain @click="clear">清空表</el-button>
		    <el-button type="primary" size="mini" plain @click="del">删除行</el-button>
		    <el-button type="primary" size="mini" plain @click="add">添加行</el-button>
		    <el-button type="primary" size="mini" plain @click="getRows">获取选中的行</el-button>
		  </div>
		</div>
        <vol-table
          ref="tableList"
          :loadKey="true"
          :columns="columns"
          :pagination-hide="false"
          :height="230"
          :defaultLoadPage="false"
          @loadBefore="loadBefore"
         @loadAfter ="loadTableAfter"
          :endEditAfter="endEditAfter"
          url="/api/Student/getDetailPage"
          :row-index="true"
          :columnIndex="true"
          :index="true"
          :click-edit="true"
        ></vol-table>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="消息中心">消息中心</el-tab-pane>
      
    </el-tabs>
  </div>
</template>

<script>
import VolTable from "@/components/basic/VolTable.vue";
var _row;//主表的行
export default {
  components: {
    VolTable,
  },
  
  methods: {
	/* onInited(){//自己写的页面不支持这个事件
		 
	}, */
	
	add() {
	  //console.log(_row.stud_id);
	  this.$refs.tableList.addRow({'stud_id':_row.stud_id});
	},
    loadBefore(params, callback) {
      //设置查询 条件
	
      
      //获取主表选中的行
      this.$emit("parentCall", ($vue) => {
        var rows = $vue.getSelectRows();
        if (rows.length) {
          _row = rows[0];
        }
      });
      if (!_row) {
        //取消选中，清空明细
        return (this.$refs.tableList.rowData.length = 0);
        //  return this.$Message.error("请选中主表行数据");
      }

      //设置查询条件，用主表id加载明细表数据(如果是自己定义的接口，这里条件自己处理)
      params.value = _row.stud_id;
      //设置排序字段(如果是自己定义的接口，排序字段不一定填写)
      if (!params.sort) {
        params.sort = "stud_grade_id";
      }
      return callback(true);
    },
	
	loadTableAfter(rows, callback) {//params取的是当前子表所有数据
		//console.log(this.$refs.tableList.rowData);
		//console.log(rows);
	},
    endEditAfter(row) {
      //结束编辑时，可以直接调用后台的代码进行保存
      //console.log(row);
      return true;
    },
    save(row) {
      //保存
	  //console.log(row);
	  //this.http.post("/api/Stud_grade/UpdateStudGrade",row, true).then((result) => {
		this.http.post("/api/Stud_grade/UpdateStudGrade",row, true).then((result) => {
			//console.log(result);
	    if (!result.status){
			return this.$message.error(result.message)
		}else{
			this.$Message.info(result.message);
		}
    })
	//console.log(row.class_name);
	//this.$Message.info("保存");
	},
    del(row) {
      this.$confirm(
        "确认要删除此行数据【" + row.class_name + "】？？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认删除",
          cancelButtonText: "取消",
            center: true
        }
      )
        .then(() => {
		this.http.post("/api/Stud_grade/DeleteStudGrade",row, true).then((result) => {
				//console.log(result);
		    if (!result.status){
				return this.$message.error(result.message)
			}else{
				this.$Message.info(result.message);
				//this.$refs.tableList.delRow();//删除当前选择行
				this.$refs.tableList.load();//刷新整个表
			}
		})
		
          /* this.$message({
            type: "info",
            message: "提交删除请求1",
          }); */
        })
    },
    getRender() {
      //生成表格编辑配置
      return (h, { row, column, index }) => {
        return h(
          "div",
          {
            style: {
              cursor: "pointer",
              color: " #409eff",
              "font-size": "13px",
            },
          },
          [
            h(
              "a",
              {
                props: {},
                style: { "border-bottom": "1px solid" },
                onClick: (e) => {
                  e.stopPropagation();
                  this.del(row);
                },
              },
              "删除"
            ),
            h(
              "a",
              {
                props: {},
                style: { "margin-left": "9px", "border-bottom": "1px solid" },
                onClick: (e) => {
                  e.stopPropagation();
                  this.$refs.tableList.edit.rowIndex = index;
                },
              },
              "编辑"
            ),
            h(
              "a",
              {
                props: {},
                style: { "margin-left": "9px", "border-bottom": "1px solid" },
                onClick: (e) => {
                  e.stopPropagation();
                  //强制结束编辑
                  this.$refs.tableList.edit.rowIndex = -1;
                  this.save(row);
                },
              },
              "保存"
            ),
          ]
        );
      };
    },
  },
  data() {
    return {
      tableData: [],
      //从生成的代码sellorder2.vue里面把明细配置复制过来就能用
      columns: [
        {
          field: "stud_grade_id",
          title: "stud_grade_id",
          type: "string",
          width: 90,
          hidden: true,
          require: true,
        },
        {
          field: "class_name",
          title: "课程名称",
          type: "string",
          width: 90,
		  edit: { type: "text" }
        },
        {
          field: "grade",
          title: "分数",
		  summary:true,
          type: "int",
          width: 150,
          edit: { type: "drop" }
        },
        {
          field: "fujian",
          title: "附件",
          type: "string",
          width: 100,
          type:"file",
          require: true,
          sort: true,
        },
        {
          title: "操作",
          width: 110,
          align: "center",
          render: this.getRender(),
        },
      ],
    };
  },
};
</script>
<style scoped>
h3 {
  font-weight: 500;
  padding-left: 10px;
  background: white;
  margin-top: 10px;
  padding-top: 6px;
  padding-bottom: 5px;
}
.header {
  display: flex;
  margin-bottom: 10px;
  .text {
    line-height: 30px;
    border-bottom: 2px solid #607d8b;
    font-size: 16px;
    /* color: #FF9800; */
    font-weight: 500;
  }
  .btns {
    flex: 1;
    text-align: right;
  }
}
</style>